@sansFontFamily: "Open Sans" , Helvetica, Arial, sans-serif;
// Dark UI theme

.border-radius-editor {
    padding: 18px 16px 0 16px;
    font-family: @sansFontFamily;
    min-height: 220px;

    &:focus {
      outline: none;
    }

    header {
        margin-bottom: 5px;
        padding-bottom: 10px;
        font-size: 14px;
    }
    label {
        display: inline-block;
        padding-right: 5px;
        font-weight: 700;
        cursor: default;
    }

    input {
        margin: 0;
        vertical-align: middle;
        box-shadow: none;
        width: 100%;

        &:focus {
          outline: none;
        }
    }
}

.border-radius-editor table {
    table-layout: fixed;

    tr:hover {
        td {
            background: rgba(0,0,0,.07);
        }

        .corner-icon:after {
            animation: pulse .3s ease-in-out infinite;

            @keyframes pulse {
                50% {
                    transform: scale(1.25);
                }
            }
        }
    }

    td {
        padding: 10px;
        border: none;
        vertical-align: middle;
        margin: 0;
        font-size: 13px;
        white-space: nowrap;

        &:first-child {
            border-radius: 24px 0 0 24px;
        }

        &:last-child {
            border-radius: 0 24px 24px 0;
        }
    }

    td.slider-container {
        width: 99%;
        padding: 10px 5px
    }

    td.slider-value {
        width: 50px;
    }

    td .button-bar {
        position: relative;
        top: -1px;

        li.selected a {
          background-color: rgba(0,0,0,.4);
        }
    }

    .label-container {
        width: 80px;
        position: relative;
    }

    .corner-icon {
        width: 16px;
        height: 11px;
        border: solid 2px rgba(0,0,0,.2);
        display: block;
        margin: 0 5px 0 10px;
        position: relative;

        &:not(.all):after {
            content: "";
            position: absolute;
            background: black;
            width: 4px;
            height: 4px;
            border-radius: 50%;
        }

        &.top-left:after {
            top: -3px;
            left: -3px;
        }

        &.top-right:after {
            top: -3px;
            right: -3px;
        }

        &.bottom-left:after {
            bottom: -3px;
            left: -3px;
        }

        &.bottom-right:after {
            bottom: -3px;
            right: -3px;
        }

        &.all .dot {
          position: absolute;
          background: black;
          width: 4px;
          height: 4px;
          border-radius: 50%;

          &:nth-child(1) {
            top: -3px;
            left: -3px;
          }
          &:nth-child(2) {
            top: -3px;
            right: -3px;
          }
          &:nth-child(3) {
            bottom: -3px;
            left: -3px;
          }
          &:nth-child(4) {
            bottom: -3px;
            right: -3px;
          }

        }
    }

    .units-container {
        padding-left: 0;
        width: 120px;

        .button-bar {
            li {
                a {
                    padding: 5px 6px 6px 6px;
                    min-width: 18px;
                }
            }
        }
    }

    td label {
        margin: 0;
        cursor: default;
    }
}

// Dark theme for the corner Icons
.dark .border-radius-editor .corner-icon {
    border: solid 2px rgba(255,255,255,.2);

    &:not(.all):after {
        background: white;
    }

    &.all .dot {
      background: white;
    }
}

.dark .border-radius-editor table {
  td .button-bar li.selected a {
      background-color: #404040;
  }

  tr:hover {
      td {
          background: rgba(255,255,255,.08);
      }
  }

}

.border-radius-editor ul.button-bar {
    display: inline-block;
    padding: 0;
    margin: 0;

    li {
        display: inline-block;
        text-align: center;
    }

    a {
        text-decoration: none;
        color: rgba(0,0,0,.4);
        cursor: default;
        display: block;
        padding: 5px 12px 6px 12px;
        border-radius: 14px;
        transition: all .1s ease-out;


        &:hover {
            cursor: pointer;
        }
    }

    li:not(.selected) a {
        &:hover {
            color: rgba(0,0,0,.8);
            background: rgba(0,0,0,.1);
        }
    }
}

.dark .border-radius-editor ul.button-bar {
    a {
        color: rgba(255,255,255,.4);
    }

    li:not(.selected) a {
        &:hover {
            color: rgba(255,255,255,.8);
            background: rgba(0,0,0,.4);
        }
    }
}

.border-radius-editor .button-bar a:focus,
.border-radius-editor .button-bar li.selected a:focus {
    outline: none;
    position: relative;
    z-index: 999;
}


.border-radius-editor .button-bar li.selected a {
    background-color: #2492ba;
    color: white;
}

// Styles for custom Slider

@track-color-dark: #444;
@track-color: rgba(0,0,0,.2);
@thumb-color: white;

@thumb-radius: 12px;
@thumb-height: 24px;
@thumb-width: 24px;
@thumb-shadow-size: 1px;
@thumb-shadow-blur: 1px;
@thumb-shadow-color: #111;
@thumb-border-width: 1px;
@thumb-border-color: white;

@track-width: 100%;
@track-height: 6px;
@track-shadow-size: 2px;
@track-shadow-blur: 2px;
@track-shadow-color: #222;
@track-border-width: 1px;
@track-border-color: black;

@track-radius: 5px;
@contrast: 5%;


.track() {
  width: @track-width;
  height: @track-height;
  cursor: pointer;
  animate: 0.2s;
}

.thumb() {
  height: @thumb-height;
  width: @thumb-width;
  border-radius: @thumb-radius;
  background: @thumb-color;
  cursor: pointer;
}

.border-radius-editor input[type=range] {
  -webkit-appearance: none;
  margin: @thumb-height/2 0;
  width: @track-width;
  background-color: transparent;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    .track();
    background: @track-color;
    border-radius: @track-radius;
  }

  &::-webkit-slider-thumb {
    .thumb();
    -webkit-appearance: none;
    margin-top: ((-@track-border-width * 2 + @track-height) / 2) - (@thumb-height / 2);
  }

  &:focus::-webkit-slider-runnable-track {
    background: lighten(@track-color, @contrast);
  }

  &::-moz-range-track {
    .track();
    background: @track-color;
    border-radius: @track-radius;
    border: @track-border-width solid @track-border-color;
  }
  &::-moz-range-thumb {
     .thumb();
  }

  &::-ms-track {
    .track();
    background: transparent;
    border-color: transparent;
    border-width: @thumb-width 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    background: darken(@track-color, @contrast);
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
  }
  &::-ms-fill-upper {
    background: @track-color;
    border: @track-border-width solid @track-border-color;
    border-radius: @track-radius*2;
  }
  &::-ms-thumb {
    .thumb();
  }
  &:focus::-ms-fill-lower {
    background: @track-color;
  }
  &:focus::-ms-fill-upper {
    background: lighten(@track-color, @contrast);
  }
}

.dark .border-radius-editor input[type=range] {

  &::-webkit-slider-runnable-track {
    background: @track-color-dark;
  }


  &::-moz-range-track {
    background: @track-color-dark;
  }


  &::-ms-fill-lower {
    background: darken(@track-color-dark, @contrast);
  }
  &::-ms-fill-upper {
    background: @track-color-dark;
  }
  &:focus::-ms-fill-lower {
    background: @track-color-dark;
  }
  &:focus::-ms-fill-upper {
    background: lighten(@track-color-dark, @contrast);
  }
}
